<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>尚硅谷会员登录页面</title>
    <base th:href="@{/}">
    <link type="text/css" rel="stylesheet" href="static/css/style.css"/>
    <!--1. 导入vue.js文件-->
    <script src="static/script/vue.js"></script>
</head>
<body>

    <div id="app">
        <div id="login_header">
            <a href="index.html">
                <img class="logo_img" alt="" src="static/img/logo.gif"/>
            </a>
        </div>

        <div class="login_banner">
            <div id="l_content">
                <span class="login_word">欢迎登录</span>
            </div>

            <div id="content">
                <div class="login_form">
                    <div class="login_box">
                        <div class="tit">
                            <h1>尚硅谷会员</h1>
                        </div>
                        <div class="msg_cont">
                            <b></b>
                            <span class="errorMsg" v-text="msg"></span>
                        </div>
                        <div class="form">
                            <!--<form action="login_success.html" >-->
                            <form action="user?method=login" method="post">
                                <label>用户名称：</label>
                                <input
                                        class="itxt"
                                        type="text"
                                        placeholder="请输入用户名"
                                        autocomplete="off"
                                        tabindex="1"
                                        name="username"
                                        id="username"
                                        v-model="username"
                                />
                                <br/>
                                <br/>
                                <label>用户密码：</label>
                                <input
                                        class="itxt"
                                        type="password"
                                        placeholder="请输入密码"
                                        autocomplete="off"
                                        tabindex="1"
                                        name="password"
                                        id="password"
                                        v-model="password"
                                />
                                <br/>
                                <br/>
                                <input type="submit" value="登录" id="sub_btn" @click="login"/>
                            </form>
                            <div class="tit">
                                <a href="regist.html">立即注册</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="bottom">
				<span>
					尚硅谷书城.Copyright &copy;2015
				</span>
        </div>
    </div>
    <script>

        const app = new Vue({
            el: "#app",
            data: {
                username: '',
                password: '',
                // msg: '请输入用户名和密码'
                msg: '[[${msg==null? "请输如用户名和密码" : msg}]]'
            },
            methods: {
                login() {
                    if (this.username === '') {
                        this.msg = "请输入用户名"
                        //阻止事件提交
                        event.preventDefault()
                    }
                    if (this.password === '') {
                        this.msg = "请输入密码"
                        //阻止事件提交
                        event.preventDefault()
                    }
                }
            }
        })

    </script>
</body>
</html>
